<script setup lang="ts">
import StarBackgroundContainer from '../components/star-background-container/index.vue';
import { useOfflineEarnings, useSect } from '../../../composables';
import { EVENTS, GameKernel } from '../../../game';
import { computed } from 'vue';

const { state: offlineEarningsState } = useOfflineEarnings();
const { state: sectState } = useSect();

const realmInfo = computed(() => {
  return offlineEarningsState.value.realmInfo;
});

const sectHangUpTaskInfo = computed(() => {
  return offlineEarningsState.value.sectHangUpTaskInfo;
});

function formatDuration(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  const pad = (n: number) => n.toString().padStart(2, '0');
  return `${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
}

function onGetRewardClick() {
  GameKernel.inst.bus.emit(EVENTS.OFFLINE_EARNINGS_GET_EARNINGS);
}
</script>

<template>
  <star-background-container v-if="offlineEarningsState.showInfo">
    <div class="h-10 flex-none flex items-center justify-center w-full">
      <span class="text-base font-bold">离线收益</span>
    </div>
    <div class="flex-1 overflow-auto p-2">
      <div class="flex flex-col gap-2">
        <a-card size="small">
          <div>
            离线时间：{{ formatDuration(offlineEarningsState.offlineTime) }}
          </div>
        </a-card>
        <a-card title="修为" size="small">
          <div class="flex flex-col gap-1">
            <div v-if="sectState.currentSect" class="flex items-center">
              <div>消耗宗门修炼场加成次数：</div>
              <div>
                {{ Math.floor(realmInfo.consumeSectCultivationSpotCount) }} 次
              </div>
            </div>
            <div v-if="sectState.currentSect" class="flex items-center">
              <div>剩余宗门修炼场加成次数：</div>
              <div>
                {{ Math.floor(realmInfo.sectCultivationSpotValidCount) }} 次
              </div>
            </div>
            <div v-if="sectState.currentSect" class="flex items-center">
              <div>宗门修炼场加成获得的修为：</div>
              <div>
                {{ Math.floor(realmInfo.consumeSectCultivationSpotCountExp) }}
              </div>
            </div>
            <div class="flex items-center">
              <div>所有功法加成获得的修为：</div>
              <div>{{ Math.floor(realmInfo.cultivationKillsExp) }}</div>
            </div>
            <div class="flex">
              <div class="flex-none">获得的总修为：</div>
              <div class="flex items-center">
                <div>
                  {{ Math.floor(offlineEarningsState.earnings.realm.value) }}
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card v-if="sectState.currentSect" title="宗门日常" size="small">
          <div class="flex flex-col gap-1">
            <div class="flex items-center">
              <div>宗门贡献：</div>
              <div>{{ Math.floor(sectHangUpTaskInfo.sectContribution) }}</div>
            </div>
            <div class="flex items-center">
              <div>灵石：</div>
              <div>{{ Math.floor(sectHangUpTaskInfo.spiritualStone) }}</div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <div class="flex-none flex items-center justify-end p-2">
      <a-button :block="true" @click="onGetRewardClick">领取奖励</a-button>
    </div>
  </star-background-container>
</template>
